<template>
  <div id="investManage">
    <div class="showLC">
      <el-popover placement="bottom" trigger="click">
        <div>
          <el-button size="mini" @click="showZS(5)">五层</el-button>
          <el-button size="mini" @click="showZS(6)">六层</el-button>
        </div>
        <div slot="reference" class="lcc">
          <span>楼层选择:</span>
          <span class="lc"></span>
        </div>
      </el-popover>
    </div>
    <div class="title"></div>
    <div class="content">
      <div id="container" style="height: 400px; background: transparent"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import HighCharts from "highcharts";

export default {
  mounted () {
    this.getPie();
  },
  methods: {
    showZS (num) {
      window.UEReset();
      window.Sgworld &&
      window.Sgworld.flyTo(
        16.826513290405273,
        -125.1737289428711,
        70.27117919921875,
        0,
        -42.4249267578125,
        93.60037994384766,
        10401.529296875,
        () => {
        },
        2
      );
      window.Sgworld.execute(
        "grapi",
        "business",
        {visibility: true, floor: num},
        null
      );
      var temnum = num+" 楼"
      window.creatLabel(temnum);
    },
    getPie () {
      axios
        .get(
          window.apiUrl1 + "lease/querLeaseStatistics"
        )
        .then(function (response) {
          HighCharts.chart("container", {
            chart: {
              type: "pie",
              backgroundColor: "rgba(0,0,0,0)",
              options3d: {
                enabled: true,
                alpha: 45,
                beta: 0,
              },
            },
            plotOptions: {
              pie: {
                events: {
                  click: function (e) {
                    var name = e.point.options.name;
                    if (name == "招商中") {
                      window.Sgworld.flyTo(
                        6664.6552734375,
                        -2976.47119140625,
                        4128.67626953125,
                        0,
                        -74.22987365722656,
                        90.9599609375,
                        4280,
                        () => {
                        },
                        4
                      );
                      // window.Sgworld.execute("grapi","business",{ visibility: true, floor: 6 },() => {});
                    } else if (name == "已入驻") {
                      window.Sgworld.flyTo(
                        -1227.8616943359375,
                        -4624.1923828125,
                        7602.537109375,
                        0,
                        -74.22987365722656,
                        90.95991516113281,
                        7800,
                        () => {
                        },
                        4
                      );
                      // window.Sgworld.execute("grapi","business",{ visibility: true, floor: 5 },() => {});
                    } else {
                      window.Sgworld.flyTo(
                        -636.6370849609375,
                        -1637.263671875,
                        6228.1611328125,
                        0,
                        -74.2298583984375,
                        90.9599380493164,
                        6461,
                        () => {
                        },
                        4
                      );
                      // window.Sgworld.execute("grapi","business",{ visibility: true, floor: 5 },() => {});
                    }
                  },
                },
                allowPointSelect: true,
                cursor: "pointer",
                depth: 80,
                dataLabels: {
                  enabled: true,
                  connectorColor: "white",
                  color: "white",
                  style: {
                    fontSize: "26px",
                  },
                },
                //显示图例
                showInLegend: true,
              },
            },
            legend: {
              symbolPadding: 20,
              layout: "vertical",
              align: "right",
              itemHoverStyle: {
                color: "#ffffff",
              },
              symbolRadius: 0,
              x: -100, //距离x轴的距离
              y: -90, //距离Y轴的距离
              itemStyle: {
                color: "#ffffff",
                fontWeight: "bold",
                fontSize: 26,
              },
            },
            tooltip: {
              headerFormat:
                '<span style="font-size: 26px">{point.key}</span><br/>',
              style: {
                fontSize: 26,
              },
            },
            series: [
              {
                name: "招商数量",
                data: [
                  ["已入驻", response.data.data[0].checkedIn],
                  ["洽谈中", response.data.data[0].negotiation],
                  ["招商中", response.data.data[0].rent],
                ],
                colors: ["#15df7a", "#00D7E9", "#F3DD64"],
              },
            ],
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.showLC {
  position: absolute;
  right: 100px;
  top: 20px;
}
.lcc {
  height: 64px;
  line-height: 64px;
  font-size: 30px;
}
.lc {
  width: 64px;
  height: 64px;
  line-height: 64px;
  display: inline-block;
  background: url("../../../../../static/images/index/lc.png");
  position: absolute;
  cursor: pointer;
}
.lc:hover {
  background: url("../../../../../static/images/index/lc-s.png");
}
#investManage {
  box-sizing: border-box;
  margin-top: 20px;
  position: relative;
}
.title {
  width: 645px;
  height: 112px;
  background: url("../../../../../static/images/invest.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 15px;
  margin-left: -50px;
  cursor: pointer;
}
.highcharts-container {
  width: 600px;
  height: 400px;
  border: 1px solid #ddd;
  margin: auto;
}
</style>
